<template>
  <div class="container">
    <el-card class="jtqCard">
      <el-row style="height: 50px">
        <el-col>
          <el-button
            type="success"
            icon="el-icon-edit"
            class="jtqBtn"
            size="small"
            @click="addBtn"
            >添加菜单</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        :border="false"
        default-expand-all
        :expand-on-click-node="false"
        :header-cell-style="headerStyle"
        :tree-props="{ children: 'points' }"
      >
        <el-table-column prop="title" label="标题" sortable width="300">
          <template slot-scope="{ row }">
            <i
              :class="[
                row.is_point
                  ? 'el-icon-view'
                  : row.pid === null && row.points
                  ? 'el-icon-folder-opened'
                  : 'el-icon-document',
                !row.is_point && !row.childs && row.points && row.pid !== null
                  ? 'question'
                  : ''
              ]"
              style="font-size: 18px"
            ></i>
            <span style="padding-left: 5px">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" sortable>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template v-slot="{ row }">
            <el-button
              circle
              plain
              type="primary"
              icon="el-icon-edit"
              @click="editDo(row)"
            ></el-button>
            <el-button
              circle
              plain
              type="danger"
              icon="el-icon-delete"
              @click="delData(row)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹层部分 -->
    <el-dialog :visible="showDialog" title="创建菜单" @close="cancel">
      <el-form
        ref="refForm"
        :model="dialogForm"
        label-width="160px"
        style="width: 510px"
        :rules="rules"
      >
        <el-form-item label="权限组名称">
          <el-radio-group v-model="dialogForm.is_point" @change="changeRadio">
            <el-radio :disabled="judgeEdit" :label="false">菜单</el-radio>
            <el-radio :disabled="judgeEdit" :label="true">权限点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-right: 10px" label="权限组名称">
          <el-select v-model="dialogForm.pid" style="width: 100%">
            <el-option
              v-for="item in treeData1"
              :key="item.id"
              :value="item.id"
              :label="item.title"
              :disabled="item.pid === null && item.childs && isChange"
            >
              <!-- dialogForm.pid === null ? '主导航' :  -->
              <span
                :style="{
                  'padding-left':
                    item.id === 0
                      ? '0'
                      : item.pid === null
                      ? '10px'
                      : item.is_point
                      ? '30px'
                      : '20px'
                }"
                >{{ item.title }}</span
              >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="dialogForm.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="dialogForm.title"></el-input>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-col :span="9">
            <el-button style="margin-left: 25px" size="small" @click="cancel"
              >取消</el-button
            >
            <el-button type="primary" size="small" @click="isOk"
              >确定</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, update } from './../../api/base/menus'
export default {
  name: 'Menus',
  data () {
    return {
      judgeEdit: null,
      isChange: false,
      treeData: [],
      treeData1: [],
      tableData: [],
      showDialog: false,
      dialogForm: {
        is_point: false,
        pid: 0,
        code: '',
        title: ''
      },
      rules: {
        code: [{ required: true, message: '代码不能为空', trigger: 'blur' }],
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 修改单选框时触发
    changeRadio (label) {
      this.isChange = label
    },
    // 弹层确定
    async isOk () {
      await this.$refs.refForm.validate()
      if (this.dialogForm.pid === '') {
        this.dialogForm.pid = null
      }
      if (this.judgeEdit) {
        await update(this.dialogForm)
      } else {
        await add(this.dialogForm)
      }
      this.cancel()
      this.listData()
    },
    // 弹层取消
    cancel () {
      this.showDialog = false
      this.dialogForm = {
        is_point: false,
        pid: 0,
        code: '',
        title: ''
      }
      this.judgeEdit = null
      this.isChange = false
      this.$refs.refForm.resetFields()
    },
    // 弹层动态标题
    // 新增按钮
    addBtn () {
      this.showDialog = true
      this.judgeEdit = false
    },
    // 编辑按钮
    editDo (row) {
      this.dialogForm = {
        is_point: row.is_point || row.is_point === false,
        pid: row.pid === null ? 0 : row.pid,
        code: row.code,
        title: row.title,
        id: row.id
      }
      this.judgeEdit = true
      this.showDialog = true
      console.log(row)
    },
    // 删除按钮
    delData (row) {
      // 弹框
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: row.id })
          this.$message({
            type: 'success',
            message: '成功删除了用户!'
          })
          this.listData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    // 列表表头样式回调
    headerStyle () {
      return { backgroundColor: '#f5f7fa' }
    },
    async listData () {
      const { data } = await list()
      data.forEach((item) => {
        for (const key in item) {
          if (key === 'childs') {
            item.points = item[key]
          }
        }
      })
      this.tableData = data
      this.treeData = data
      this.treeData1 = []
      this.treeData.forEach((item) => {
        // this.treeData1.push(item)
        this.treeData1.push(item)
        if (item.childs) {
          item.childs.forEach((item1) => {
            if (!item1.is_point || item1.is_point === false) {
              this.treeData1.push(item1)
            }
          })
        }
      })
      this.treeData1 = [{ id: 0, pid: 999, title: '主导航' }, ...this.treeData1]
    }
  },
  created () {
    this.listData()
  }
}
</script>

<style scoped lang="less">
.el-table {
  ::v-deep .el-table__expand-icon--expanded {
    display: none;
  }
}
.question {
  padding-left: 16px;
}
</style>
